<template>
    <div class="book">
        <div class="order">
            <template v-for="(item, index) in props.book.orderRules" :key="index">
                <div class="item">
                    <div class="title">{{ item.title }}</div>
                    <div class="if" v-if="item.icon !== null" :style="{ backgroundColor: item.color, color: '#fff' }">{{
                        item.icon
                    }}</div>
                    <div class="content">{{ item.introduction }}</div>
                </div>
            </template>
        </div>
        <div class="checkIn">
            <div class="item">
                <div class="title">{{ props.book.checkInRules[0].title }}</div>
                <div class="content">
                    <div class="content2">
                        <template v-for="(item, index) in props.book.checkInRules[0].items" :key="index">
                            <div class="content-item">
                                <div class="icon">
                                    <div v-if="item.isDeleted">
                                        <van-icon name="close" color="#ff6666" />
                                    </div>
                                    <div v-else="item.isDeleted">
                                        <van-icon name="passed" color="#17d2bc" />
                                    </div>
                                </div>
                                <div class="text">{{ item.introduction }}</div>
                            </div>
                        </template>
                    </div>

                </div>
            </div>
        </div>
        <div class="checkOther">
            <div class="item">
                <div class="title" v-if="props.book.checkinOtherInfo[0].title !== null">{{
                    props.book.checkinOtherInfo.title
                }}</div>
                <div class="title" v-else >    </div>
                <div class="content">
                    <template v-for="(item, index) in props.book.checkinOtherInfo[0].items" :key="index">
                        {{ item.introduction }}
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    book: {
        type: Object,
        default: () => ({})
    }
})

// console.log(props.book)
</script>

<style lang="less" scoped>
.item {
    display: flex;
    align-items: center;

    margin-top: 20px;
    font-size: 12px;
    line-height: 15px;

    .title {
        color: #666;
        width: 64px;
        height: 15px;
    }

    .content {
        color: #333;
    }
}

.book {
    .order {
        .if {
            margin-right: 4px;
            padding: 1px 4px;
            border-radius: 3px;
        }
    }

    .checkIn {
        .content2 {
            display: grid;
            grid-template-columns: 100% 100%;          
            
            .content-item {
                display: flex;
                margin-bottom: 5px;

                .icon {
                    margin-right: 3px;
                }
            }
        }

    }

    .checkOther{
        .content{
            color: #666;
        }
    }
}
</style>